<template>
  <div class="w-100">
    <!--1-->
    <div class="row center_nav container">
          <div class="col-xs-4 navleft"><span class="glyphicon glyphicon-menu-left"></span><span>返回</span></div>
          <div class="col-xs-8">菜果果点餐</div>
    </div>
    <!--2-->
    <div class="navimg"><img :src="data.banner"></div>
    <!--3-->
    <div class="timaalert fs12">{{data.msg}}</div>
    <div class="address fs11">{{data.address}}</div>
    <div class="diancan">点餐</div>
    <div class="detail_border">
        <div class="detailorder" v-for="item of dataone">
          <div class="pull-left"><img class="detail_img" :src="item.pic" alt=""></div>
          <div class="pull-left twodetail">
                <div class="fs15">{{item.name}}</div>
                <div class="fs12">{{item.description}}</div>
                <div class="fs15">{{item.price | pricefilter}}</div>
          </div>
          <div class="pull-right threedetail" >
            <img  @click="reduce(item)" class="detail_img2" src="../../static/images/button_minus_pre.png" alt="">
            <span>{{item.car_num}}</span>
            <img @click="add(item)" class="detail_img1" src="../../static/images/button_add_pre.png" alt="">
          </div>
        </div>
    </div>
    <div class="bottomnav">
      <div class="bottom_one" @click="total">合计:{{totalyuan}}元</div>
      <div class="bottom_two fs17" @click="submit">提交</div>
    </div>
    <!--8总计的点击事件-->
    <div class="allpayshow" v-if="payshow">
        <div class="allpayshow_floor">
          <div class="allpayshow_navtop">
            <div @click="goback">返回</div>
            <div>菜单</div>
            <div>情况</div>
          </div>
          <div class="allpayshow_container" v-for="item of dataone">
            <div class="allpayshow_container_row">
              <span class="allpayshow_container_row_span">
                <span>{{item.name}}</span><br>
                <span>{{item.price | guolvfilter}}</span>
              </span>
            </div>
            <div class="allpayshow_container_row2">
              <img @click="detail_reduce(item)"  class="detail_img1"  src="../../static/images/button_minus_pre.png" alt="">
              <span>{{item.car_num}}</span>
              <img @click="detail_add(item)" class="detail_img2" src="../../static/images/button_add_pre.png" alt="">
            </div>
            <div class="allpayshow_container_row3" @click="deletedata(item)">删</div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import wx from 'weixin-js-sdk'
export default {
  name: 'HelloWorld',
  data () {
    return {
      payshow:false,
      totalyuan:0,
      data:'',
      cabinet_id:null,
      dataone:null,
      pathname:null,
      res:200,
    }
  },
   created () {
      this.gettoken()
      this.wechat()
      this.request()
    },
  methods:{
      submit:function(){
          axios({
          url:this.$store.state.url +  this.$store.state.urlchild.order + '?token=' + this.$store.state.tokenhongqi,
          method:'post',
          headers :{
            'Accept': 'application/json',
            // token:this.$store.state.tokenhongqi
            'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8',
          }
        })
        .then((res)=>{
          console.log("11111");
          console.log(res.data);
          console.log("11111");
          if(res.data.code==400){
              alert('购物车为空')
              this.$router.push('commit')
          }
          else if(this.res==200){
              console.log('添加购物车成功')  
              router.push('commit')
          }
        })
      },
      request () {
        // TODO 改为中间件
        const authToken = localStorage.getItem('authToken')
        // const url = location.href
        const postData = {
          token: authToken
        }
        axios.get(this.$store.state.url + '/user_base/user/info', { params: postData })
          .then(response => {
            const code = response.data.code
            if (code === 200) {
              // 成功
              this.user = response.data.data
            } else {
              localStorage.removeItem('authToken')
            }
          })
      },

    // 微信小程序
    wechat:function(){
       const postData = {
          token: this.$store.state.tokenhongqi,
          url: location.href.split('?')[0]
        }
        axios.get(this.$store.state.url + '/user_base/wechat/jssdk_config', { params: postData })
              .then(response => {
                // console.log(response);
                // console.log(response.data.data.appId);
                // console.log(response.data.data.timestamp);
                // console.log(response.data.data.nonceStr);
                // console.log(response.data.data.signature);
                if (response.data) {
                  wx.config({
                    debug: true,
                    appId: response.data.data.appId,
                    timestamp: response.data.data.timestamp,
                    nonceStr: response.data.data.nonceStr,
                    signature: response.data.data.signature,
                    jsApiList: ['onMenuShareTimeline']
                  })
                  wx.ready(function () {   
                    wx.onMenuShareTimeline({
                      title: '自定义标题', 
                      link: location.href, 
                      imgUrl: 'https://o3e85j0cv.qnssl.com/tulips-1083572__340.jpg', 
                      success: function () {
                        alert('分享成功')
                      },
                      cancel: function () {
                        alert('取消分享')
                      },
                      fail: function (res) {
                        alert(JSON.stringify(res))
                      }
                    })
                  })
                } else {
                  // console.log(response)
                }
              })
              .catch(error => {
                this.toast_message = '分享流失败'
                this.toast = true
                // console.log(error)
              })
    },
    gettoken:function(){
      // let str = window.location.href;
      // // console.log(str);
      // // let strarraytoken = str.split("/#")
      // // this.pathname = strarraytoken[0];
      // // console.log(this.pathname);
      // if(str.indexOf('?') != -1){
      //   // let str = window.location.href;
      //   // let strarray = str.split('=');
      //   // console.log(strarray);
      //   // let strarraytoken = strarray[1].split("#")
      //   // console.log(strarraytoken);
        this.$store.state.tokenhongqi = localStorage.getItem('authToken')
        // console.log(this.$store.state.tokenhongqi);
      // }else{
      //   //  console.log('+++');
      //    window.location.href = 'http://item.fanzhanggui.test.sszshow.com/user_base/user/get_code?url=' + str; 
       
      // }
    },
    total:function(){
      this.payshow=true;
    },
    goback:function(){
      this.payshow=false;
    },
    //主页面商品数量 ===减
    reduce:function(item){
      console.log(item);
      if(item.car_num<1){
         item.car_num=0;
      }
      else{
        item.car_num--;
      }
      console.log(item.id);
      console.log(item.car_num);
      console.log(this.$store.state.tokenhongqi);
      // axios({
      //   url:this.$store.state.url +  this.$store.state.urlchild.cartgoods + '?token=' + this.$store.state.tokenhongqi,
      //   method:'post',
      //   data:{
      //       car_id:1,
      //       cabinet_id:2259,
      //       num:2,
      //   },
      //   headers :{
      //     //  token:this.$store.state.tokenhongqi,
      //      'Content-Type' : 'application/x-www-form-urlencoded',
      //   }
      // })
      // .then((res)=>{
      //   console.log(res);
      // })
      let param = new URLSearchParams();
      param.append("dishes_id", item.id);
      param.append("cabinet_id",2259);
      param.append("num",item.car_num);
      axios.post(this.$store.state.url +  this.$store.state.urlchild.cartgoods + '?token=' + this.$store.state.tokenhongqi, param)
      .then((res)=>{
        console.log(res);
        console.log(res.data.data.car);
      })
    },
    // 主页面商品数量===加
    add:function(item){
       item.car_num++;
       console.log(item.id);
       console.log(item.car_num);
       console.log(this.$store.state.tokenhongqi)
      // axios({
      //   url:this.$store.state.url +  this.$store.state.urlchild.cartgoods + '?token=' + this.$store.state.tokenhongqi,
      //   method:'post',
      //   data:{
      //       dishes_id:item.id,
      //       cabinet_id:2259,
      //       num:item.car_num
      //   },
      //   headers :{
      //    'Accept': 'application/json',
      //     // token:this.$store.state.tokenhongqi,
      //    'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8',
      //  }
      // })
      // .then((res)=>{
      //   console.log(res.data);
      // })
        let param = new URLSearchParams();
        param.append("dishes_id", item.id);
        param.append("cabinet_id",2259);
        param.append("num",item.car_num);
        axios.post(this.$store.state.url +  this.$store.state.urlchild.cartgoods + '?token=' + this.$store.state.tokenhongqi, param)
        .then((res)=>{
          console.log(res);
          console.log(res.data.data.car);
        })
    },
    // 购物车页面===减
    detail_reduce:function(item){
       if(item.car_num<1){
         item.car_num=0;
        }
        else{
          item.car_num--;
        }
        console.log(item.id);
        console.log(item.car_num);
        console.log(this.$store.state.tokenhongqi);
        axios({
          url:this.$store.state.url +  this.$store.state.urlchild.numberxiu + '?token=' + this.$store.state.tokenhongqi,
          method:'post',
          data:{
              car_id:item.id,
              num:item.car_num
          },
          headers :{
            'Accept': 'application/json',
            'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8',
        }
        })
        .then((res)=>{
          console.log(res.data);
        })
    },
     // 购物车页面===加
     detail_add:function(item){
        item.car_num++;
        axios({
          url:this.$store.state.url +  this.$store.state.urlchild.numberxiu+ '?token=' + this.$store.state.tokenhongqi,
          method:'post',
          data:{
              car_id:item.id,
              num:item.car_num,
          },
          headers :{
            'Accept': 'application/json',
            // token:this.$store.state.tokenhongqi
            'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8',
            }
        })
        .then((res)=>{
          console.log(res.data);
        })
    },
    // 删除购物车菜品(一个)
    deletedata:function(item){
       axios({
        url:this.$store.state.url +  this.$store.state.urlchild.delete + '?token=' + this.$store.state.tokenhongqi,
        method:'post',
        data:{
            car_id:item.id,
        },
        headers :{
          'Accept': 'application/json',
          // token:this.$store.state.tokenhongqi
          'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8',
      }
      })
      .then((res)=>{
        console.log(res.data);
      })
    },
    
  },
  mounted:function(){
     console.log(this.$store.state.tokenhongqi);
      // 扫描餐柜进入
    if(this.$store.state.tokenhongqi){
           axios.get(this.$store.state.url + this.$store.state.urlchild.scan + this.$store.state.id + '?token=' + this.$store.state.tokenhongqi).then((res)=>{
            this.data = res.data.data;
            this.cabinet_id=res.data.data.cabinet_id; 
            this.$store.state.cabinet_id=res.data.data.cabinet_id;
            console.log(res);
          })
          //  获取菜品
          axios.get(this.$store.state.url + this.$store.state.urlchild.ncuisine + '?cabinet_id=' +  2259 + '&token=' + this.$store.state.tokenhongqi).then((res)=>{
            this.dataone=res.data.data.data;
            console.log(res)
          })
    }

  },
  beforeMount:function(){

  },
  filters:{
      pricefilter:function(e){
        return '￥'+e+'元'
      },
      guolvfilter:function(e){
        return '￥'+ e + '/份'
      }
  }
}
</script>
<style scoped>
  /*1*/
.container{background-color: #fff;padding: 0px 3vw;}
.navleft{padding:0px;font-size: 17px;}
.center_nav{height: 7.5vh;line-height:7.5vh;background-color: #fff;color: white;font-size: 18px;background-color: #21292c}
/*2*/
.navimg{border-bottom: 5px solid #ffffff;}
.navimg img{height:20.9vh;background-size: 100% 100%;width: 100%}
/*3*/
.timaalert{width: 100%;background-color:#fef6eb;color: #fca933;text-align:center;}
/*4*/
.address{width: 100%;background-color:#ffffff;border-bottom: 0.6vh solid #eeeeee;padding: 0px 10%;text-align: center}
/*5*/
.diancan{height: 6.14vh;width: 100%;border-bottom:1px solid #eee;padding-left: 6.6%;line-height: 6.14vh;}
/*6*/
.detail_border{width: 100%;height: 49vh;overflow-y: scroll;margin-bottom: 44px;}
.detailorder{width: 100%;height:12.73vh;padding:1.49vh;border-bottom: 1px solid #eee;padding:3vh 6.6%;border-bottom: 1px solid #eee;}
.detail_img{width:52px;}
.detail_img1{width: 30px;}
.detail_img2{width: 30px;}
.twodetail{line-height: 18px;margin-left: 10px;}
.twodetail div:nth-child(1){color: #333;font-weight: 600;}
.twodetail div:nth-child(2){color: #666666;}
.twodetail div:nth-child(3){color: #333;font-weight: 500;}
.threedetail{position:relative;top: 10px;}
/*7*/
.bottomnav{text-align: center;position:fixed;bottom: 0px;width: 100%;height:6.59vh;border-top: 1px solid #eee;background-color: white;}
.bottomnav>div{margin: 0px;}
.bottom_one{width: 49%;display: inline-block;height:6.59vh;line-height: 6.59vh;color:#faa934}
.bottom_two{width: 49%;display: inline-block;height:6.59vh;line-height: 6.59vh;background-color: #faa934;color: white;}
/*8总计的点击事件*/
.allpayshow{position:fixed;bottom: 0px;height:100%;width: 100%;background: rgba(0, 0, 0, 0.5)}
.allpayshow_floor{width: 100%;position:absolute;bottom: 0px;opacity: 1;background-color:white}
/*9*/
.allpayshow_navtop{width: 100%;height:6.59vh;border-bottom: 1px solid #eee;}
.allpayshow_navtop>div{width: 32%;height:6.59vh;display: inline-block;text-align: center;line-height: 6.59vh;}
/*10*/
.allpayshow_container>div{display: inline-block;}
.allpayshow_container{width: 100%;border-bottom: 1px solid #eee;}
.allpayshow_container_row{width: 34%;height: 100%;}
.allpayshow_container_row_span{position: relative;left: 16px;top: 4px;}
.allpayshow_container_row2{width: 31%;text-align: center;}
.allpayshow_container_row3{width: 32%;text-align: center;}
</style>
